Vue中使用v | 您所在的位置:网站首页 › vue3 数据绑定 多层 › Vue中使用v |
场景
业务场景中常有一对多的情况。 后端在给前端返回数据时是一个对象的list,为每个对象的有一个属性 是多的那个的对象的list。 比如后台给前端返回的数据示例如下
那么在Vue中怎样将这个一对多的数据循环都显示出来。 注: 博客:https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现实现两层循环嵌套 班次名称:{{item.bcmc}} 打卡时间段{{k+1}}:{{data.dkkssj}}--{{data.dkjssj}} 班次名称:{{item.bcmc}} 最早下井时间:{{data.dkkssj}} 最晚下井时间:{{data.dkjssj}} 最短下井时长:{{data.zxjxljsj}} 最长下井时长:{{data.zdjxljsj}}使用外面一层的item即代表每个对象,获取其多的那个list再次进行循环。 这里是使用了v-if进行了判断,根据外层循环的某属性的不同值显示不同的模板。 实现效果
如果是三层嵌套循环或者更多的话同上 班次组名称:{{item.bczmc}} 班次名称:{{ele.bcmc}} 打卡时间段{{k+1}}:{{data.dkkssj}}--{{data.dkjssj}} 最早下井时间:{{data.dkkssj}} 最晚下井时间:{{data.dkjssj}} 最短下井时长:{{data.zxjxljsj}} 最长下井时长:{{data.zdjxljsj}}实现效果
|
CopyRight 2018-2019 实验室设备网 版权所有 |